<template>
  <div>
    <div class="compile">
      <van-nav-bar
        title="个人信息"
        left-text=""
        left-arrow
        @click-left="backMine"
      />
      <div class="line"></div>
      <van-cell is-link title="头像" center>
        <template #default>
          <img src="@/assets/images/我的/xxxx-2@2x.png" alt="" />
        </template>
      </van-cell>
      <div class="line"></div>
      <!-- 昵称 -->
      <van-cell is-link value="莉雅kk" title="昵称" />
      <!-- 用户编号 -->
      <van-cell value="240281083" title="用户编号" />
      <!-- 一句话介绍 -->
      <van-cell is-link value="点击设置" title="一句话介绍" />
      <!-- 性别 -->
      <van-cell is-link @click="showSexPopup" :value="sexState" title="性别" />
      <van-popup
        v-model:show="sexShow"
        position="bottom"
        round
        :style="{ height: '45%' }"
        :close-on-click-overlay="false"
      >
        <van-picker
          title="性别"
          show-toolbar
          :columns="sexColumns"
          @confirm="onSexConfirm"
          @cancel="onSexCancel"
        />
      </van-popup>
      <!-- 生日 -->
      <van-cell
        is-link
        @click="showBirthdayPopup"
        :value="birthdayState"
        title="生日"
      />
      <van-popup
        v-model:show="birthdayShow"
        position="bottom"
        round
        :style="{ height: '45%' }"
        :close-on-click-overlay="false"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onBirthdayConfirm"
          @cancel="onBirthdayCancel"
        />
      </van-popup>
      <div class="line"></div>
      <!-- 阅读爱好 -->
      <van-cell is-link value="点击选择" title="阅读爱好" />
      <!-- 学历 -->
      <van-cell
        is-link
        @click="showDegreePopup"
        :value="degreeState"
        title="学历"
      />
      <van-popup
        v-model:show="degreeShow"
        position="bottom"
        round
        :style="{ height: '45%' }"
        :close-on-click-overlay="false"
      >
        <van-picker
          title="学历"
          show-toolbar
          :columns="degreeColumns"
          @confirm="onDegreeConfirm"
          @cancel="onDegreeCancel"
        />
      </van-popup>
      <!-- 情感状态 -->
      <van-cell
        is-link
        @click="showEmotionPopup"
        :value="emotionState"
        title="情感状态"
      />
      <van-popup
        v-model:show="emotionShow"
        position="bottom"
        round
        :style="{ height: '45%' }"
        :close-on-click-overlay="false"
      >
        <van-picker
          title="情感状态"
          show-toolbar
          :columns="emotionColumns"
          @confirm="onEmotionConfirm"
          @cancel="onEmotionCancel"
        />
      </van-popup>
      <!-- 职业 -->
      <van-cell is-link value="点击设置" title="职业" />
      <div class="bottom">
        <img src="@/assets/images/我的/grxx-4@2x.png" alt="" />
        <span
          >樊登读书重视您的个人信息，以上信息将仅用在书记、内容推荐、以便为您提供更优质、精准的服务。</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
// import { Toast } from 'vant';
export default {
  setup() {
    const router = useRouter();
    // 点击返回main页面
    const backMine = () => {
      router.push("/home/mine");
    };
    // 情感选项
    const emotionShow = ref(false);
    const emotionState = ref("保密");
    const emotionColumns = ["单身", "恋爱", "有娃", "保密"];
    const showEmotionPopup = () => {
      emotionShow.value = true;
    };
    const onEmotionConfirm = (value) => {
      // Toast(`当前值: ${value}, 当前索引: ${index}`);
      emotionState.value = value;
      emotionShow.value = false;
    };
    const onEmotionCancel = () => {
      // Toast('取消');
      emotionShow.value = false;
    };

    //性别选项
    const sexShow = ref(false);
    const sexState = ref("保密");
    const sexColumns = ["保密", "女", "男"];
    const showSexPopup = () => {
      sexShow.value = true;
    };
    const onSexConfirm = (value) => {
      // Toast(`当前值: ${value}, 当前索引: ${index}`);
      sexState.value = value;
      sexShow.value = false;
    };
    const onSexCancel = () => {
      // Toast('取消');
      sexShow.value = false;
    };

    // 生日选项
    const year = ref(2000);
    const mouth = ref(1);
    const day = ref(1);
    const birthdayShow = ref(false);
    const birthdayState = ref(`${year.value}年${mouth.value}月${day.value}日`);
    const showBirthdayPopup = () => {
      birthdayShow.value = true;
    };
    const onBirthdayConfirm = (value) => {
      year.value = value.getFullYear();
      mouth.value = value.getMonth() + 1;
      day.value = value.getDate();
      birthdayState.value = `${year.value}年${mouth.value}月${day.value}日`;
      birthdayShow.value = false;
    };
    const onBirthdayCancel = () => {
      birthdayShow.value = false;
    };
    const currentDate = ref(new Date(1990, 1, 1));

    // 学历
    const degreeShow = ref(false);
    const degreeState = ref("点击设置");
    const degreeColumns = [
      "高中及以下",
      "专科",
      "本科",
      "研究生",
      "研究生及以上",
    ];
    const showDegreePopup = () => {
      degreeShow.value = true;
    };
    const onDegreeConfirm = (value) => {
      degreeState.value = value;
      degreeShow.value = false;
    };
    const onDegreeCancel = () => {
      degreeShow.value = false;
    };
    return {
      backMine,
      // 情感
      emotionShow,
      showEmotionPopup,
      emotionColumns,
      emotionState,
      onEmotionConfirm,
      onEmotionCancel,
      // 性别
      sexShow,
      sexState,
      sexColumns,
      showSexPopup,
      onSexConfirm,
      onSexCancel,
      // 生日
      year,
      mouth,
      day,
      birthdayShow,
      currentDate,
      showBirthdayPopup,
      onBirthdayConfirm,
      birthdayState,
      onBirthdayCancel,
      minDate: new Date(1980, 0, 1),
      maxDate: new Date(2021, 1, 1),
      // 学历
      degreeShow,
      degreeState,
      degreeColumns,
      showDegreePopup,
      onDegreeConfirm,
      onDegreeCancel,
    };
  },
};
</script>

<style lang="less" scoped>
.van-cell__value img {
  width: 44px;
  height: 44px;
}
.line {
  height: 7px;
  background-color: #fafafa;
}
/deep/ .van-nav-bar .van-icon {
  color: #000 !important;
}
.compile {
  height: 100%;
  background-color: #fafafa;
  font-weight: 500;
  font-family: PingFangSC;
  .van-cell {
    color: #212121 !important;
    font-size: 13px !important;
  }
  .van-cell__value {
    font-size: 10px !important;
  }
  .van-cell__title {
    span {
      color: #212121 !important;
      font-size: 13px !important;
    }
  }
  .van-nav-bar .van-icon {
    color: #000 !important;
  }
  .bottom {
    padding: 10px;
    display: flex;
    img {
      width: 12px;
      height: 12px;
      margin-right: 5px;
    }
    span {
      font-size: 10px;
      color: #b8b8b8;
    }
  }
}
</style>
